<template>
  <div class="clear-fans">
    <!-- 设置清理的条件 -->
    <el-form ref="form" class="el-form" :model="form" label-width="180px">
      <el-form-item label="仅检测不删除">
        <el-switch v-model="form.onlyCheck"></el-switch>
      </el-form-item>
      <!-- <el-form-item label="朋友圈检测">
        <el-switch v-model="form.circle"></el-switch>
      </el-form-item> -->
      <el-form-item class="check-circle" label="免检时间">
        <el-input
          v-model="form.skipHour"
          class="check-circle-input"
          size="small"
          placeholder="请设置检测时间"
          maxlength="10"
          show-word-limit
        ></el-input>
        <span>跳过多少小时内有互动的好友（聊天，朋友圈互动,上次已检测等）</span>
      </el-form-item>
      <el-form-item class="el-form-btn">
        <el-button size="small" type="primary" @click="onSubmit(1)">开始清理</el-button>
        <el-button size="small" type="info" @click="onSubmit(2)">停止清理</el-button>
        <!-- <el-button
          size="small"
          style="background-color: #ff9f00; color: #ffffff"
          type="warning"
          @click="clearLocalData(currentWeChatId)"
        >
          删除记录
        </el-button> -->
        <el-button
          size="small"
          style="background-color: #ff9f00; color: #ffffff"
          type="warning"
          @click="queryLastRecords(currentWeChatId)"
        >
          查询记录
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 管理 -->
    <el-table :data="tableData" stripe border height="60" class="table-data" style="width: 100%">
      <el-table-column label="任务id" prop="TaskId" width="180px"></el-table-column>
      <el-table-column label="筛选个数" prop="Count"></el-table-column>
      <el-table-column label="删除个数" prop="DelCount"></el-table-column>
      <el-table-column label="跳过个数" prop="SkipCount"></el-table-column>
      <el-table-column label="僵尸粉数量" prop="Zombies">
        <template slot-scope="{ row }">
          <span v-if="row.Zombies" v-text="row.Zombies.length"></span>
          <span v-else v-text="row.Zombies"></span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="StartTime">
        <template slot-scope="{ row }">
          <span>{{ row.StartTime | timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后推送时间" prop="EndTime">
        <template slot-scope="{ row }">
          <span>{{ row.EndTime | timeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showZombies(scope.row)">查看僵尸粉</el-button>
          <el-button type="text" size="small" @click="removeRecord(scope.row)">删除记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="僵尸粉id" append-to-body :visible.sync="zombiesDialog" width="60%">
      <el-tag v-for="(zombey, index2) in currentZombies" :key="index2" style="margin:5px;" type="info">
        {{ zombey }}
      </el-tag>

      <span slot="footer" class="dialog-footer">
        <el-button @click="zombiesDialog = false">取 消</el-button>
        <el-button type="primary" @click="zombiesDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { GetFriendDetectResult, PostStopFriendDetectTask, PostFriendDetectTask } from '@/api/webSocketApi'

export default {
  name: 'ToolsClearFans',
  data() {
    return {
      form: {
        onlyCheck: true,
        // circle: true,
        skipHour: 72
      },
      zombiesDialog: false,
      currentZombies: []
    }
  },
  computed: {
    ...mapGetters({
      currentWeChatId: 'tools/currentWeChatId',
      wechatsNameMap: 'conversation/wechatsNameMap',
      tableData: 'nedb/zombies'
    })
  },
  methods: {
    // 开始清理僵尸粉
    onSubmit(index) {
      const wechatId = this.currentWeChatId
      if (!wechatId) {
        // 如果没有选择微信
        this.$message({
          message: '请先选择一个微信',
          type: 'warning'
        })
      } else if (index === 1) {
        //   微信昵称
        const wechatNick = this.wechatsNameMap[wechatId] || wechatId
        // 开始清理僵尸粉
        const { onlyCheck, skipHour } = this.form
        PostFriendDetectTask(wechatId, '', onlyCheck, skipHour)
        this.$message({
          type: 'success',
          message: `微信：${wechatNick}，开始清理僵尸粉`,
          duration: 1000
        })
      } else {
        // 停止清理僵死粉
        PostStopFriendDetectTask(wechatId)
      }
    },
    // 删除指定好友的记录
    removeRecord(row) {
      this.$store.dispatch('nedb/ClearZombiesData', row)
    },
    // 获取最后一次的清粉记录
    queryLastRecords() {
      if (this.currentWeChatId) {
        GetFriendDetectResult(this.currentWeChatId)
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择微信！',
          duration: 2000
        })
      }
    },
    // 查看僵尸粉id
    showZombies(row) {
      console.log('showZombies', row.Zombies)
      this.zombiesDialog = true
      this.currentZombies = row.Zombies
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-fans {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    border-bottom: solid #ebeef5 1px;
    position: relative;
    .el-form-item {
      margin: 0;
    }

    .check-circle-input {
      width: 100px;
      margin-right: 10px;
    }

    .el-form-btn {
      position: absolute;
      top: 25%;
      right: 10%;
    }
  }
}
</style>
